<template>
	<a-spin :spinning="cSpinningStatus" wrapper-class-name="global-spin">
		<template #indicator>
			<global-svg-icon v-if="videoTipStatus" icon-name="video-loading" width="48px" height="48px" class-name=" spin-rotate" />
			<global-svg-icon v-else icon-name="video-error" width="48px" height="48px" class-name="status-icon " />
		</template>
		<template #tip>
			<div class="spin-tip">
				{{ videoTipStatus ? '正在连接..' : '连接异常' }}
			</div>
		</template>
		<slot></slot>
	</a-spin>
</template>

<script setup lang="ts" name="GlobalSpin">
import { ref } from 'vue';
const props = withDefaults(defineProps<videoSpinType>(), {
	spinning: 0,
	id: '',
	warningStatus: false
});

const emits = defineEmits<{
	(e: 'error', value: string): void; // 视屏报错
}>();

enum TsVideoSpinning {
	loading = 0,
	succeed = 1,
	error = 2
}

interface videoSpinType {
	spinning: TsVideoSpinning;
	id: string;
	warningStatus: boolean;
}

const videoTipStatus = ref<boolean>(true);
const inOrOutNetwork = localStorage.getItem('inOrOutNetwork');
const timer = ref<any>(null);

const cSpinningStatus = computed(() => {
	return props.spinning === 1 || props.spinning === 2 ? false : true;
});

// srs 流媒体超时
const srsOverTime = () => {
	if (inOrOutNetwork === '0') {
		timer.value = setTimeout(() => {
			videoTipStatus.value = false;
			emits('error', props.id);
			clearTimeout(timer.value);
		}, 10000);
	}
};
// zlm 超时
const zlmOverTime = () => {
	videoTipStatus.value = false;
	timer.value && clearTimeout(timer.value);
	emits('error', props.id);
};
// 超时报错
const watchEffectStop = watchEffect(() => {
	switch (props.spinning) {
		case 0:
			srsOverTime();
			break;
		case 2:
			zlmOverTime();
			break;
		default:
			timer.value && clearTimeout(timer.value);
			break;
	}
});
onUnmounted(() => {
	watchEffectStop();
});
</script>

<style lang="less">
.warning {
	border: 4px solid #f59700;
}

.global-spin {
	width: 100%;
	height: 100%;

	.ant-spin-container {
		width: 100%;
		height: 100%;
		object-fit: fill;
	}

	& > div > .ant-spin {
		box-sizing: border-box;
		display: flex;
		max-height: none;
		padding-top: 94px;
		background: linear-gradient(180deg, #0d1c3a 0%, #051020 100%),
			linear-gradient(158.09deg, rgba(255, 255, 255, 0.0225) 11.42%, rgba(255, 255, 255, 1.5e-5) 93.55%);
		background-color: #111e33;
		justify-content: center;

		i {
			margin-top: -26px !important;
			margin-left: -12px !important;
			font-size: 24px;
			color: #00a9c3;
		}

		.ant-spin-text {
			text-shadow: 0 0 0 #fff;
		}
	}

	.spin-tip {
		margin-top: 20px;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		color: white;
		flex: none;
		order: 1;
		flex-grow: 0;
	}

	.status-icon {
		transform: translateX(-15px) translateY(-4px) !important;
	}
	// 旋转
	.spin-rotate {
		animation: spin-rotate 1s linear infinite !important;
	}
}
@keyframes spin-rotate {
	0% {
		transform: translateX(-15px) translateY(-4px) rotate(0deg);
	}

	100% {
		transform: translateX(-15px) translateY(-4px) rotate(360deg);
	}
}
</style>
